<template>
    <div class="v-window-data-select">
        <el-popover ref="popover1"
                    trigger="click">
            <div class=" v-window-data-select clear" style="width: 230px; flex-wrap: wrap;">
                <div class="item cursor" v-for="(i,index) in options" :key="index"
                     :class="{'isSelect':isSelect===index}"
                     @click="isSelect = index">{{index}}天
                </div>
                <div class="item cursor" @click="add">自定义</div>
            </div>
        </el-popover>
        <el-button plain v-popover:popover1>朴素按钮</el-button>
    </div>
</template>

<script>
    export default {
        name: 'v-window-data-select',
        data () {
            return {
                isSelect: 1,
                options: [1, 2, 3, 4, 5, 6, 7, 8]
            }
        },
        methods: {
            add () {
                this.options.push(9)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .v-window-data-select
        .item
            height 29px
            margin 7px
            float left
            width 62px
            text-align center
            line-height @height
            background rgba(255, 255, 255, 1)
            border-radius 4px
            border 1px #D8DCE5 solid
            font-size 12px
        .isSelect
            background rgba(64, 158, 255, 1)
            color #fff
</style>
